<template>
    <div class="system">
        <!-- 左侧菜单 -->
        <section class="system-slideMenu">
            <slideMenu></slideMenu>
        </section>
        <!-- 右侧内容 -->
        <section class="system-container">
          <el-scrollbar class="main-container">
              <slot></slot>
          </el-scrollbar>
        </section>
    </div>
</template>

<script setup>
import slideMenu from '@/components/common/slideMenu.vue'
</script>

<style>
.system{
    display:flex;
}
.system-slideMenu{
    width: 200px;
    height: 100vh;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;

    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* flex-shrink: 0; */
    background-color: #545c64;
    border: 1px solid #545c64;
    transition: widh 0.5s;
}
.system-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.main-container {
  max-height: calc(100vh - 86px);
}
</style>